<template>
  <div>
    <div class="memberPhotos">
      <div class="memtx">
        <img :src="userInfo.header ? userInfo.header: tx">
      </div>
      <h2>{{userInfo.name}}的简历</h2>
      <p>{{userInfo.updateTime ? '更新于' + userInfo.updateTime.substring(0,10) : ''}}</p>
      <div class="yulan" @click="viewpre">预览简历</div>
    </div>
    <el-menu
      :default-active="active"
      class="el-menu-vertical-demo"
      background-color="#fff"
      text-color="#1e1e1e"
      active-text-color="#20a2b2">
      <el-menu-item :index="item.name" v-for="(item, index) in memlist" :key="index"
                    @click="tohtml(item.name)" style="text-align: center">
        <span slot="title">{{item.title}}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script type="text/babel">
// @ is an alias to /src
import { CVBaseInfo } from '../assets/js/domains'
import tx from '../assets/img/default.jpg'

export default {
  name: 'PersonLeft',
  components: {},
  data: function () {
    return {
      tx: tx,
      userInfo: {},
      memlist: [
        { name: '', title: '基本信息' },
        { name: 'yixiang', title: '求职意向' },
        { name: 'work', title: '工作经验' },
        { name: 'project', title: '项目经验' },
        { name: 'study', title: '教育经历' },
        { name: 'school', title: '在校情况' },
        { name: 'skill', title: '技能特长' },
        { name: 'enclosure', title: '简历附件' }
      ]
    }
  },
  props: {
    active: {
      default: ''
    },
    mduserInfo: {
      default: function () {
        return {}
      }
    }
  },
  watch: {
    mduserInfo: function (val) {
      if (localStorage.getItem('md_userInfo')) {
        this.userInfo = JSON.parse(localStorage.getItem('md_userInfo'))
        this.getCVBaseInfo()
      }
    }
  },
  created: function () {
    if (localStorage.getItem('md_userInfo')) {
      this.userInfo = JSON.parse(localStorage.getItem('md_userInfo'))
      this.getCVBaseInfo()
    }
  },
  mounted: function () {
  },

  methods: {
    getCVBaseInfo: function () {
      const _this = this
      CVBaseInfo({ user_uid: localStorage.getItem('md_user_uid') }).then(function (res) {
        if (res.code === 200) {
          if (res.data) {
            const newsd = JSON.parse(localStorage.getItem('md_userInfo'))
            newsd.header = res.data.header
            _this.userInfo = res.data
            localStorage.setItem('md_userInfo', JSON.stringify(newsd))
          }
        } else {
          _this.$alert(res.msg, '提示')
        }
      })
    },
    viewpre: function () {
      window.location.href = '/personResume.html'
    },
    tohtml: function (name) {
      if (this.$route.path !== '/' + name) {
        this.$router.push({ path: '/' + name })
      }
    }
  }
}
</script>
<style lang="less">
  .memberPhotos {
    background: #fff;
    width: 200px;
    clear: both;
    overflow: hidden;
    margin-bottom: 30px;
    padding-bottom: 20px;

    .memtx {
      text-align: center;
      padding: 50px 0 0 0;

      img {
        width: 77px;
        height: 77px;
        border-radius: 50%;
        margin: 0 auto;
      }
    }

    h2 {
      height: 30px;
      font-size: 22px;
      text-align: center;
      color: #1e1e1e;
      line-height: 30px;
    }

    p {
      height: 24px;
      font-size: 16px;
      text-align: center;
      color: #8d8e9c;
      line-height: 24px;
    }

    .yulan {
      width: 160px;
      height: 40px;
      line-height: 36px;
      border: 2px solid #20a2b2;
      border-radius: 6px;
      font-size: 18px;
      text-align: center;
      color: #20a2b2;
      margin: 10px auto;
      cursor: pointer;
    }
  }
</style>
